<script lang="ts" setup>
import { useData } from 'vitepress';
import VPSwitchAppearance from './VPSwitchAppearance.vue';

const { site } = useData();
</script>

<template>
    <div v-if="site.appearance" class="VPNavBarAppearance">
        <a href="https://gitee.com/ubml/farris-vue" target="_blank" class="address" title="前往Farris Vue"><img src="/assets/gitee.svg" /></a>
        <VPSwitchAppearance />
    </div>
</template>

<style scoped>
.address {
    display: block;
    width: 18px;
    margin-right: 20px;
}
.VPNavBarAppearance {
    display: none;
}

@media (min-width: 1280px) {
    .VPNavBarAppearance {
        display: flex;
        align-items: center;
    }
}
</style>
